<template>
  <div class="index_wrap" id="scrollH">
    <div id="Total_Imgs" class="Imgs_wrap">
      <vue-waterfall-easy
        id="fall"
        :imgsArr="imgsArr"
        @scrollReachBottom="getData"
        :maxCols="3"
        :imgWidth="490"
        :linkRange="'img'"
      >
        <div slot="waterfall-head">
          <head-index class="head_position" :title="title"></head-index>
          <nav-index></nav-index>
          <swiper-index :swiperURL="SwiperURL" :imgbox="imgBox"></swiper-index>
          <Modal title="hhh" v-model="showModal" class-name="vertical-center-modal">
            <p>你还没有登录哦~那就没有自己的小仓库啦~</p>
          </Modal>
        </div>
        <div class="img-info" slot-scope="props">
          <a :href="props.value.src" download>下载</a>
            <i
              v-if="changeStatus(props.index+1)"
              class="iconfont icon-shoucang shoucang"
              :class="{active: true}"
              @click="deleteCollect(props.index+1)"
            ></i>
            <i
              v-else
              class="iconfont icon-shoucang shoucang"
              :class="{active: false}"
              @click="addCollect(props.index+1)"
            ></i>
        </div>
      </vue-waterfall-easy>
    </div>
  </div>
</template>

<script>
import HeadIndex from "./components/Head";
import SwiperIndex from "./components/Swiper";
import NavIndex from "./components/Nav";
import axios from "axios";
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  inject: ["reload"],
  name: "HomeIndex",
  components: {
    HeadIndex,
    SwiperIndex,
    NavIndex,
    // TotalImgs,
    vueWaterfallEasy
  },
  data() {
    return {
      showModal: false,
      userName: sessionStorage.userName,
      Collections_img: [],
      isSelected: false,
      imgsArr: [],
      group: 0,
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      scrollHeight: document.body.scrollHeight,
      SwiperURL: [],
      imgBox: "",
      title: ""
    };
  },
  created() {
    this.getCollectionsURL();
    this.getData();
    this.screenWidth = document.body.clientWidth;

    if (this.screenWidth > 1560) {
      this.imgBox = "imgBox";
      this.title = "title";
    } else if (this.screenWidth > 1480 && this.screenWidth < 1560) {
      this.imgBox = "imgBox1";
      this.title = "title";
    } else if (this.screenWidth > 1220 && this.screenWidth < 1480) {
      this.imgBox = "imgBox2";
      this.title = "titleChange";
    } else {
      this.imgBox = "imgBox3";
      this.title = "titleChange2";
    }
    this.$nextTick(() => {});
  },
  methods: {
    // onOk(){
    //   alert(11)
    //   this.$router.push("/Login")
    // },
    deleteCollect(index) {
      console.log("取消收藏");
      //把用户名字和图片id传进去  this.imgsArr[i].id
      console.log(this.imgsArr[index - 1].id);
      let deleteCollection = {
        imgid: this.imgsArr[index - 1].id,
        username: this.userName
      };
      axios.post("api/deleteCollection", deleteCollection).then(() => {
        console.log("取消收藏成功");
      });
      this.reload();
    },
    addCollect(index) {
      //判断是否登录
      if (this.userName) {
        console.log("添加收藏");
        //把用户名字和图片id传进去  this.imgsArr[i].id
        console.log(this.imgsArr[index - 1].id);
        let collectionJson = {
          imgid: this.imgsArr[index - 1].id,
          username: this.userName
        };
        axios.post("api/addCollection", collectionJson).then(() => {
          console.log("添加收藏成功");
        });
        this.reload();
      } else {
        this.showModal = true;
      }
    },
    changeStatus(index) {
      // console.log(index);
      // if (index < this.Collections_img.length+1) {
      for (let i = index - 1; i < this.imgsArr.length; i++) {
        for (let j = 0; j < this.Collections_img.length; j++) {
          if (this.Collections_img[j].id === this.imgsArr[i].id) {
            // console.log(this.Collections_img[j].id, 222);
            // console.log(this.imgsArr[i].id, 333);
            return true;
          }
        }
        return false;
      }

      // }
    },
    getCollectionsURL() {
      axios.get("api/collection/" + this.userName).then(res => {
        res = res.data;
        console.log(res);
        if (res.data) {
          const data = res.data;
          this.Collections_img = data;
        }
      });
    },
    getData() {
      axios.get("api/indexImage?group=" + this.group).then(res => {
        this.group++;
        // if (this.group === 2) {
        //   this.$refs.waterfall.waterfallOver();
        //   return;
        // }
        this.imgsArr = this.imgsArr.concat(res.data.data);
      });
    },

    fitWidth() {
      window.onresize = () => {
        this.screenWidth = document.body.clientWidth;
        if (this.screenWidth > 1560) {
          this.imgBox = "imgBox";
          this.title = "title";
        } else if (this.screenWidth > 1480 && this.screenWidth < 1560) {
          this.imgBox = "imgBox1";
          this.title = "title";
        } else if (this.screenWidth > 1220 && this.screenWidth < 1480) {
          this.imgBox = "imgBox2";
          this.title = "titleChange";
        } else {
          this.imgBox = "imgBox3";
          this.title = "titleChange2";
        }
      };
    },

    getSwiperURl() {
      axios.get("static/mock/swipers.json").then(res => {
        console.log(res);
        res = res.data;
        if (res.data) {
          const data = res.data;
          this.SwiperURL = data.indexImgs;
        }
      });
    }
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "overflow:hidden");
    this.getSwiperURl();
    this.fitWidth();
    this.scrollHeight = 1000;
    // axios.get("/api/hello").then(res=>{})
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "overflow:hidden");
  },
  //销毁前清除
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  }
};
</script>

<style scoped>
body {
}
.vue-waterfall-easy-container {
  height: 1000px !important;
}
.backbottom {
  background-color: rgb(218, 218, 218);
  position: fixed;
  bottom: 50px;
  right: 50px;
  padding: 20px 25px;
}
.head_position {
  background-color: #000;
}
.active {
  color: red;
}
a:visited {
  color: #2d8cf0;
}
</style>